<!DOCTYPE html>
<html class="x-admin-sm" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>客户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">客户管理</a>
        <a><cite>客户列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="x-body">
    <!--    <div class="layui-row">-->
    <!--        <form class="layui-form layui-col-md12 x-so">-->
    <!--            <div class="layui-inline layui-show-xs-block">-->
    <!--                <input type="text" name="empName" placeholder="请输入用户名" autocomplete="off" class="layui-input">-->
    <!--            </div>-->
    <!--            <div class="layui-inline layui-show-xs-block">-->
    <!--                <button class="layui-btn" lay-submit="" lay-filter="sreach">-->
    <!--                    <i class="layui-icon">&#xe615;</i>-->
    <!--                </button>-->
    <!--            </div>-->
    <!--        </form>-->
    <!--    </div>-->
    <table class="layui-table" id="valueTable" lay-filter="customerManage">

    </table>
</div>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-mini" lay-event="add"><i class="layui-icon"></i>添加</a>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    // 方法渲染
    var form;
    var table;
    layui.use('table', function () {
        table = layui.table, form = layui.form;
        table.render({
            elem: '#valueTable'
            , url: '/customer'
            , id: 'testReload'
            , toolbar: '#toolbar'
            , page: true
            , limit: 10
            , loading: true
            , cols: [[
                {type: 'numbers', title: '序号', align: 'center', width: '6%'}
                , {field: 'customerId', title: '客户ID', align: 'center', width: '8%', sort: true}
                , {field: 'customerName', title: '客户姓名', align: 'center', width: '8%', sort: true}
                , {field: 'sex', title: '性别', align: 'center', width: '8%', sort: true}
                , {field: 'telephone', title: '电话号码', align: 'center', width: '8%', sort: true}
                , {field: 'company', title: '公司', align: 'center', width: '8%', sort: true}
                , {field: 'address', title: '公司地址', align: 'center', width: '8%', sort: true}
                , {field: 'isOrders', title: '是否下过订单', align: 'center', width: '8%', sort: true}
                , {
                    field: 'empName',
                    title: '接待的员工',
                    templet: '<div>{{d.employeeList[0].empName}}</div>',
                    align: 'center',
                    width: '8%',
                    sort: true
                }
                , {
                    field: 'way',
                    title: '联系途径',
                    templet: '<div>{{d.contactList[0].way}}</div>',
                    align: 'center',
                    width: '10%',
                    sort: true
                }
                , {
                    field: 'content',
                    title: '聊天内容',
                    templet: '<div>{{d.contactList[0].content}}</div>',
                    align: 'center',
                    width: '10%',
                    sort: true
                }
                , {fixed: 'right', title: '操作', align: 'center', width: '10%', toolbar: '#barDemo'}
                , {field: 'empId', templet: '<div>{{d.employeeList[0].empId}}</div>', hide: true}
                , {field: 'contactId', templet: '<div>{{d.contactList[0].contactId}}</div>', hide: true}
            ]]
            , done: function (res, curr, count) {
                console.log(res.data);
                $("[data-field='isOrders']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("没有下过订单")
                    }else if($(this).text()=='1'){
                        $(this).text("下过订单")
                    }
                });
            }
        });

        table.on('tool(customerManage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('确定删除吗', function (index) {
                    console.log(data);
                    $.ajax({
                        url: "/customer/del/" + data.customerId,
                        type: "delete",
                        success: function (data) {
                            if (data.state == 1) {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                                window.parent.location.reload();
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                editCustomer(data);
            }
        });
        table.on('toolbar(customerManage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'add') {
                addCustomer(data)
            }
        });

    });

    //编辑客户
    function editCustomer(data) {
        var index = layui.layer.open({
            title: "编辑客户",
            type: 2,
            content: "cust-edit.html",
            area: ['500px', '500px'],
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                if (data) {
                    // 取到弹出层里的元素，并把编辑的内容放进去
                    body.find(".customerId").val(data.customerId);
                    body.find(".customerName").val(data.customerName);
                    body.find(".sex").val(data.sex);
                    body.find(".telephone").val(data.telephone);
                    body.find(".company").val(data.company);
                    body.find(".address").val(data.address);
                    // 给select标签赋值value。
                    body.find(".empName").val(data.empId);
                    // 根据id选择那一项
                    body.find(".empName option").eq(data.empId).attr("selected");
                    form.render();
                }
                setTimeout(function () {
                    layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }
        })
        $(window).on("resize", function () {
        })
    }

    function addCustomer(data) {
        var index = layui.layer.open({
            title: "添加客户",
            type: 2,
            content: "cust-add.html",
            area: ['500px', '500px'],
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                if (data) {
                    body.find("#classesName").val(data.classesId);
                    form.render();
                }
                setTimeout(function () {
                    layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }
        })
        $(window).on("resize", function () {

        })
    }
</script>
</body>
</html>